<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岩溶隧道智能监测系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2B4D7E',
                        secondary: '#4A6FA5'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            background-color: #1a1a1a;
            color: #ffffff;
        }

        .container {
            width: 1440px;
            margin: 0 auto;
        }

        .chart-container {
            width: 100%;
            height: 200px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="container px-6 py-8">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold">工程监控管理系统</h1>
            <div class="flex items-center space-x-6">
                <span class="text-gray-400">系统状态: <span class="text-green-500">运行中</span></span>
                <span class="text-gray-400">当前时间: <span id="current-time"></span></span>
            </div>
        </header>
        <div class="grid grid-cols-12 gap-6">
            <div class="col-span-3 space-y-6">
                <div class="bg-gray-800 p-4 rounded-lg">
                    <a href="./keshi.html">返回</a>
                    <h2 class="text-lg font-medium mb-4">基础信息</h2>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-400">工程编号</span>
                            <span>TBM-2023-001</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">掘进深度</span>
                            <span>2,456 米</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">当前速度</span>
                            <span>1.2 米/小时</span>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 p-4 rounded-lg">
                    <h2 class="text-lg font-medium mb-4">预警信息</h2>
                    <div class="space-y-4">
                        <div class="flex items-center text-yellow-500">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <span>水压过高预警</span>
                        </div>
                        <div class="flex items-center text-green-500">
                            <i class="fas fa-check-circle mr-2"></i>
                            <span>设备运行正常</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-6">
                <div class="bg-gray-800 p-4 rounded-lg h-full">
                    <h2 class="text-lg font-medium mb-4">实时监控</h2>
                    <div class="relative h-[500px] bg-black rounded-lg overflow-hidden">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <!-- 修改为 img 标签 -->
                            <img id="tunnel-view" class="w-full h-full" src="https://via.placeholder.com/800x600?text=Initial+Image" alt="Tunnel View">
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
                            <div class="flex justify-between items-center">
                                <div class="space-x-4">
                                    <button id="start-monitoring" class="bg-primary text-white px-4 py-2 !rounded-button">
                                        <i class="fas fa-play mr-2"></i>开始监控
                                    </button>
                                    <button class="bg-gray-700 text-white px-4 py-2 !rounded-button">
                                        <i class="fas fa-camera mr-2"></i>截图
                                    </button>
                                </div>
                                <div class="text-sm text-gray-400">
                                    摄像头 #1 实时画面
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-3 space-y-6">
                <div class="bg-gray-800 p-4 rounded-lg">
                    <h2 class="text-lg font-medium mb-4">水压力监测</h2>
                    <div class="chart-container" id="pressure-chart"></div>
                </div>

                <div class="bg-gray-800 p-4 rounded-lg">
                    <h2 class="text-lg font-medium mb-4">掘进速度</h2>
                    <div class="chart-container" id="speed-chart"></div>
                </div>
            </div>
        </div>
        <div class="mt-6 bg-gray-800 p-4 rounded-lg">
            <h2 class="text-lg font-medium mb-4">施工进度</h2>
            <div class="grid grid-cols-5 gap-4">
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-primary mx-auto flex items-center justify-center">
                        <i class="fas fa-check text-white"></i>
                    </div>
                    <p class="mt-2 text-sm">地质勘测</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-primary mx-auto flex items-center justify-center">
                        <i class="fas fa-check text-white"></i>
                    </div>
                    <p class="mt-2 text-sm">钻机就位</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-secondary mx-auto flex items-center justify-center">
                        <i class="fas fa-cog text-white"></i>
                    </div>
                    <p class="mt-2 text-sm">掘进作业</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-gray-700 mx-auto flex items-center justify-center">
                        <i class="fas fa-clock text-gray-400"></i>
                    </div>
                    <p class="mt-2 text-sm">支护施工</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-gray-700 mx-auto flex items-center justify-center">
                        <i class="fas fa-flag text-gray-400"></i>
                    </div>
                    <p class="mt-2 text-sm">验收完成</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent =
                now.toLocaleString('zh-CN', { hour12: false });
        }
        setInterval(updateTime, 1000);
        updateTime();

        const pressureChart = echarts.init(document.getElementById('pressure-chart'));
        pressureChart.setOption({
            animation: false,
            grid: {
                top: 20,
                right: 20,
                bottom: 20,
                left: 50
            },
            xAxis: {
                type: 'category',
                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                axisLine: { lineStyle: { color: '#666' } }
            },
            yAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#666' } }
            },
            series: [{
                data: [120, 132, 101, 134, 90, 230],
                type: 'line',
                smooth: true,
                lineStyle: { color: '#4A6FA5' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(74, 111, 165, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(74, 111, 165, 0)'
                    }])
                }
            }]
        });

        const speedChart = echarts.init(document.getElementById('speed-chart'));
        speedChart.setOption({
            animation: false,
            grid: {
                top: 20,
                right: 20,
                bottom: 20,
                left: 50
            },
            xAxis: {
                type: 'category',
                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                axisLine: { lineStyle: { color: '#666' } }
            },
            yAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#666' } }
            },
            series: [{
                data: [1.2, 1.1, 0.9, 1.3, 1.4, 1.2],
                type: 'line',
                smooth: true,
                lineStyle: { color: '#2B4D7E' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(43, 77, 126, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(43, 77, 126, 0)'
                    }])
                }
            }]
        });

        window.addEventListener('resize', function () {
            pressureChart.resize();
            speedChart.resize();
        });

        // 准备照片数组
        const images = [
            "https://pic1.imgdb.cn/item/67a61ed3d0e0a243d4fca245.png",
            "https://pic1.imgdb.cn/item/67a61f36d0e0a243d4fca24f.png",
            "https://bkimg.cdn.bcebos.com/pic/03087bf40ad162d93f841a7d1adfa9ec8a13cd6d",
            "https://np-newspic.dfcfw.com/download/D25111907346069057551_w5568h3712.jpg",
            "https://q0.itc.cn/q_70/images03/20240608/d98777f5939c468ea8bb99b63085decb.jpeg"
        ];
        let currentImageIndex = 0;

        // 获取开始监控按钮和图片元素
        const startMonitoringButton = document.getElementById('start-monitoring');
        const tunnelView = document.getElementById('tunnel-view');

        // 为开始监控按钮添加点击事件监听器
        startMonitoringButton.addEventListener('click', function () {
            // 切换到下一张图片
            currentImageIndex = (currentImageIndex + 1) % images.length;
            tunnelView.src = images[currentImageIndex];
        });
    </script>
</body>

</html>